Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/views/public/api/v1/portals/articles/_article_header.html.erb

@@ -0,0 +1,37 @@
+<% category_link_params = {
+      portal_slug: @portal.slug,
+      category_locale: @article.category&.locale,
+      category_slug: @article.category&.slug,
+      theme: @theme_from_params,
+      is_plain_layout_enabled: @is_plain_layout_enabled
+    }
+%>
+
+<div class="flex flex-row items-center gap-px mb-6">
+  <a
+    class="text-slate-500 dark:text-slate-200 text-sm gap-1 hover:cursor-pointer <%= @is_plain_layout_enabled && 'hover:underline' %> leading-8 font-semibold"
+    href="<%= generate_home_link(@portal.slug, @article.category&.locale, @theme_from_params, @is_plain_layout_enabled) %>" 
+  >
+    <%= I18n.t('public_portal.common.home') %>
+  </a>
+  <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300"><%= render partial: 'icons/chevron-right' %></span>
+  <% if @article.category %>
+    <a class="text-slate-500 dark:text-slate-200 text-sm gap-1 whitespace-nowrap hover:cursor-pointer <%= @is_plain_layout_enabled && 'hover:underline' %> leading-8 font-semibold" href="<%= generate_category_link(category_link_params) %>">
+    <%= @article.category&.name %>
+    </a>
+    <span class="w-4 h-4 [&>svg]:w-3 [&>svg]:h-3 flex items-center justify-center text-xs text-slate-500 dark:text-slate-300"><%= render partial: 'icons/chevron-right' %></span>
+    <span class="min-w-0 overflow-hidden text-sm font-semibold text-slate-800 dark:text-slate-100 text-ellipsis whitespace-nowrap"><%= @article.title %></span>
+  <% else %>
+    <span class="text-sm font-semibold leading-8 text-slate-700 dark:text-slate-100" ><%= I18n.t('public_portal.header.uncategorized') %></span>
+  <% end %>
+</div>
+<h1 class="text-3xl font-semibold leading-normal md:tracking-normal md:text-4xl text-slate-900 dark:text-white">
+  <%= article.title %>
+</h1>
+<div class="flex flex-col items-start justify-between w-full pt-6 md:flex-row md:items-center">
+  <div class="flex items-start space-x-1">
+    <span class="flex items-center text-base font-medium text-slate-600 dark:text-slate-400">
+     <%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
+    </span>
+  </div>
+</div>

app/views/public/api/v1/portals/articles/index.html.erb

@@ -0,0 +1,36 @@
+<div class="bg-slate-50 dark:bg-slate-800">
+	<div class="w-full max-w-4xl px-6 py-16 mx-auto space-y-12">
+		<div class="space-y-4">
+		<div>
+			<a
+			  class="leading-8 text-slate-800 hover:underline"
+		      href="<%= generate_home_link(@portal.slug, @category.present? ? @category.slug : '', @theme_from_params, @is_plain_layout_enabled) %>"
+			>
+				<%= @portal.name %> <%= I18n.t('public_portal.common.home') %>
+			</a>
+		<span>/</span>
+		<span>/</span>
+		</div>
+			<% @articles.each do |article| %>
+				<h1 class="text-4xl font-semibold leading-snug md:tracking-normal md:text-5xl text-slate-900 dark:text-white">
+				<%= article.title %></h1>
+				<div class="flex flex-col items-start justify-between w-full pt-2 md:flex-row md:items-center">
+					<div class="flex items-center space-x-2">
+						<img src="<%= article.author.avatar_url %>" alt="" class="w-12 border rounded-full h-812">
+						<div>
+							<h5 class="mb-2 text-base font-medium text-slate-900 dark:text-white"><%= article.author.name %></h5>
+							<p class="text-sm font-normal text-slate-700 dark:text-slate-100">
+								<%= article.author.updated_at.strftime("%B %d %Y") %></p>
+						</div>
+					</div>
+				</div>
+			<% end %>
+		</div>
+	</div>
+</div>
+<div class="flex-grow w-full max-w-4xl px-8 py-16 mx-auto space-y-12">
+	<article class="space-y-8">
+		<div class="max-w-3xl font-sans text-lg leading-8 text-slate-800 dark:text-slate-50 blog-content">
+		</div>
+	</article>
+</div>

app/views/public/api/v1/portals/articles/index.json.jbuilder

@@ -0,0 +1,8 @@
+json.payload do
+  json.array! @articles.includes([:category, :associated_articles, { author: { avatar_attachment: [:blob] } }]),
+              partial: 'public/api/v1/models/article', formats: [:json], as: :article
+end
+
+json.meta do
+  json.articles_count @articles_count
+end

app/views/public/api/v1/portals/articles/show.html.erb

@@ -0,0 +1,48 @@
+<% content_for :head do %>
+  <title><%= @article.title %> | <%= @portal.name %></title>
+  <% if @article.meta["title"].present? %>
+    <meta name="title" content="<%= @article.meta["title"] %>">
+    <meta property="og:title" content="<%= @article.meta["title"] %>">
+    <meta name="twitter:title" content="<%= @article.meta["title"] %>">
+  <% end %>
+  <% if @article.meta["description"].present? %>
+    <meta name="description" content="<%= @article.meta["description"] %>">
+    <meta property="og:description" content="<%= @article.meta["description"] %>">
+    <meta name="twitter:description" content="<%= @article.meta["description"] %>">
+  <% end %>
+  <% if @article.meta["tags"].present? %>
+    <meta name="tags" content="<%= @article.meta["tags"].join(',') %>">
+  <% end %>
+  <% if @og_image_url.present? %>
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta property="og:image" content="<%= @og_image_url.html_safe %>">
+    <meta name="twitter:image" content="<%= @og_image_url.html_safe %>">
+  <% end %>
+<% end %>
+
+<% if !@is_plain_layout_enabled %>
+<div id="portal-bg" class="bg-white dark:bg-slate-900 shadow-inner">
+  <div id="portal-bg-gradient" class="pt-8 pb-8 md:pt-14 md:pb-6">
+    <div class="max-w-5xl px-4 md:px-8 mx-auto flex flex-col">
+      <%= render "public/api/v1/portals/articles/article_header", article: @article %>
+    </div>
+  </div>
+</div>
+<% else %>
+<div class="max-w-5xl mx-auto space-y-4 w-full px-4 md:px-8 <%= @is_plain_layout_enabled ? 'py-4' : 'py-8' %>">
+  <%= render "public/api/v1/portals/articles/article_header", article: @article %>
+</div>
+<% end %>
+
+<div class="flex max-w-5xl w-full px-4 md:px-8 mx-auto">
+  <article id="cw-article-content" class="article-content flex-grow flex-2 mx-auto text-slate-800 dark:text-slate-50 text-lg max-w-3xl prose-h1:text-2xl prose-h2:text-xl prose-h2:mt-0 prose-h3:text-lg prose-code:[&>p]:p-1 prose-code:[&>p]:rounded-sm prose-code:[&>p]:bg-black-100 dark:prose-code:[&>p]:bg-black-600 prose-code:after:content-none prose-code:before:content-none prose dark:prose-invert break-words w-full <%= @is_plain_layout_enabled ? 'py-4' : 'pt-8 pb-12' %>">
+    <%= @parsed_content %>
+  </article>
+  <div class="flex-1" id="cw-hc-toc"></div>
+</div>
+<style>
+  .article-content li > p {
+    margin: 0;
+  }
+</style>

app/views/public/api/v1/portals/articles/show.json.jbuilder

@@ -0,0 +1 @@
+json.partial! 'public/api/v1/models/article', formats: [:json], article: @article