@pgcorp/ui-kit 0.8.0 → 0.8.1

package/README.md

@@ -219,6 +219,18 @@ axes, grid, legend, markers, labels, auto/fixed domains, and the data table. The
 component recomputes SVG geometry for its actual container, preserves readable
 typography, and wraps long category labels at narrow widths.
 
+Форматированные подписи шкалы Y участвуют в расчёте поля графика. Крайние
+подписи X привязаны к границам plot-area, поэтому `x-labels="auto"` сохраняет
+полные начальное и конечное значения и не обрезает их краем SVG. Если ширины
+контейнера физически недостаточно, визуальная подпись сокращается, а полное
+значение остаётся в tooltip и доступной таблице данных.
+
+Formatted Y-axis labels participate in plot-gutter calculation. Endpoint
+X labels are anchored to the plot boundaries, so `x-labels="auto"` preserves
+the full first and last values instead of clipping them at the SVG edge. When
+the container is physically too narrow, the visual label is shortened while
+the full value remains available through the tooltip and accessible data table.
+
 ```ts
 import type {
   SChartCategory,
@@ -266,6 +278,24 @@ nested button. `SPanel` uses `header-layout="auto"` to move actions below the
 title based on container width; `inline` and `stacked` remain explicit layout
 options.
 
+Action/link chip всегда сохраняет видимый интерактивный контур, включая
+`severity="secondary"` на subtle-поверхности; static chip не получает ложного
+affordance. Для строк и карточек с дополнительными controls используйте
+`SActionCard#actions` или `SActionListItem#actions`. `actions-layout`/
+`trailing-layout` задаёт `inline`, `stacked` или container-responsive
+композицию. Основное действие и trailing controls остаются sibling-элементами
+внутри одной визуальной поверхности, без вложенных интерактивных элементов и
+дублирования рамки.
+
+Action and link chips always retain a visible interactive outline, including a
+`secondary` chip on a subtle surface; static chips do not gain a false action
+affordance. For rows and cards with additional controls, use
+`SActionCard#actions` or `SActionListItem#actions`. The `actions-layout` and
+`trailing-layout` props select `inline`, `stacked`, or container-responsive
+composition. The primary action and trailing controls remain siblings inside a
+single visual surface, with no nested interactive elements or duplicated
+chrome.
+
 ### Лёгкий и редактируемый код / Lightweight and editable code
 
 `SCodeBlock` загружает CodeMirror отдельным async chunk только для

package/docs/public-api.md

@@ -33,6 +33,10 @@ responsive geometry, semantic palette и доступную таблицу да
 async boundary; `presentation="plain"` является lightweight read-only контрактом
 без загрузки editor runtime. `SChip.surface` владеет action/link семантикой, а
 `SPanel.headerLayout` — inline/stacked/auto компоновкой заголовка и действий.
+`SInteractiveSurface#actions` и использующие его `SActionCard`/
+`SActionListItem` держат primary activation и дополнительные controls
+sibling-элементами внутри одного chrome; `actionsLayout`/`trailingLayout`
+управляют inline, stacked и container-responsive раскладкой.
 
 ## English
 
@@ -68,3 +72,7 @@ an accessible data table. `SMetricCard` accepts a compact chart through
 `presentation="plain"` is the lightweight read-only contract that does not load
 the editor runtime. `SChip.surface` owns action/link semantics, while
 `SPanel.headerLayout` owns inline/stacked/auto title and action composition.
+`SInteractiveSurface#actions` and its `SActionCard`/`SActionListItem`
+compositions keep primary activation and additional controls as siblings inside
+one chrome; `actionsLayout`/`trailingLayout` control inline, stacked, and
+container-responsive layout.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",

package/src/components/shared/controls/SInteractiveSurface.css

@@ -14,6 +14,28 @@
     color var(--s-motion-standard) ease;
 }
 
+.s-interactive-surface:has(.s-interactive-surface__actions > *) {
+  container-type: inline-size;
+}
+
+.s-interactive-surface__layout {
+  @apply grid min-h-0 min-w-0 w-full items-center;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.s-interactive-surface:has(.s-interactive-surface__actions > *) .s-interactive-surface__layout {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.s-interactive-surface__primary {
+  @apply relative flex min-h-0 min-w-0;
+}
+
+.s-interactive-surface__actions {
+  @apply flex min-w-0 shrink-0 items-center;
+  gap: var(--s-space-control-gap);
+}
+
 .s-interactive-surface[data-appearance='plain'] {
   @apply border-transparent bg-transparent dark:border-transparent dark:bg-transparent;
 }
@@ -46,7 +68,9 @@
   pointer-events: none;
 }
 
-.s-interactive-surface[data-fill='container'] { @apply h-full w-full; }
+.s-interactive-surface[data-fill='container'],
+.s-interactive-surface[data-fill='container'] .s-interactive-surface__layout,
+.s-interactive-surface[data-fill='container'] .s-interactive-surface__primary { @apply h-full w-full; }
 .s-interactive-surface[data-density='compact'] { @apply text-sm; }
 .s-interactive-surface[data-density='comfortable'] { @apply text-base; }
 .s-interactive-surface[data-padding='none'] { @apply p-0; }
@@ -60,9 +84,31 @@
 .s-interactive-surface[data-s-tone='danger'] { @apply border-danger-200 bg-danger-50 dark:border-danger-800 dark:bg-danger-950; }
 .s-interactive-surface[data-selected='true'] { @apply border-primary-400 bg-primary-50 dark:border-primary-600 dark:bg-primary-950; }
 .s-interactive-surface[data-pressed='true'] { @apply border-primary-500 bg-primary-100 dark:border-primary-500 dark:bg-primary-950/70; }
-.s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed opacity-60; }
-.s-interactive-surface[data-content-align='start'] { @apply justify-start text-left; }
-.s-interactive-surface[data-content-align='center'] { @apply justify-center text-center; }
+.s-interactive-surface[data-disabled='true'] { @apply cursor-not-allowed; }
+.s-interactive-surface[data-disabled='true']:not(:has(.s-interactive-surface__actions > *)),
+.s-interactive-surface[data-disabled='true']:has(.s-interactive-surface__actions > *) .s-interactive-surface__primary {
+  @apply opacity-60;
+}
+.s-interactive-surface[data-content-align='start'] .s-interactive-surface__content { @apply justify-start text-left; }
+.s-interactive-surface[data-content-align='center'] .s-interactive-surface__content { @apply justify-center text-center; }
+
+.s-interactive-surface[data-actions-layout='stacked']:has(.s-interactive-surface__actions > *) .s-interactive-surface__layout {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.s-interactive-surface[data-actions-layout='stacked'] .s-interactive-surface__actions {
+  @apply w-full;
+}
+
+@container (max-width: 32rem) {
+  .s-interactive-surface[data-actions-layout='responsive'] .s-interactive-surface__layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .s-interactive-surface[data-actions-layout='responsive'] .s-interactive-surface__actions {
+    @apply w-full;
+  }
+}
 
 .s-interactive-surface[data-mode='action']:not([data-disabled='true']),
 .s-interactive-surface[data-mode='link']:not([data-disabled='true']) {

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -21,6 +21,7 @@ export type InteractiveSurfacePadding = 'none' | 'sm' | 'md'
 export type InteractiveSurfaceRadius = 'md' | 'lg' | 'xl'
 export type InteractiveSurfaceFill = 'content' | 'container'
 export type InteractiveSurfaceAppearance = 'card' | 'plain' | 'bare'
+export type InteractiveSurfaceActionsLayout = 'responsive' | 'inline' | 'stacked'
 
 /**
  * Единственный semantic-контракт поверхности: passive, action или ровно одна link-target.
@@ -60,6 +61,7 @@ export interface Props {
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
   appearance?: InteractiveSurfaceAppearance
+  actionsLayout?: InteractiveSurfaceActionsLayout
   contentAlign?: 'start' | 'center'
   /** Полный binding явного STooltip trigger, направляемый на activation owner. / Complete explicit STooltip trigger binding routed to the activation owner. */
   tooltipTrigger?: STooltipTriggerBinding
@@ -73,6 +75,7 @@ const props = withDefaults(defineProps<Props>(), {
   radius: 'lg',
   fill: 'content',
   appearance: 'card',
+  actionsLayout: 'inline',
   contentAlign: 'start',
   tooltipTrigger: undefined,
 })
@@ -80,9 +83,11 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   activate: [event: MouseEvent]
 }>()
-defineSlots<{
+const slots = defineSlots<{
   /** Пассивное flow-содержимое поверхности. / Passive flow content of the surface. */
   default?: () => VNodeChild
+  /** Sibling controls inside the same visual chrome and outside the primary activation owner. */
+  actions?: () => VNodeChild
 }>()
 
 const ownedAttrs = useOwnedAttrs({ component: 'SInteractiveSurface', owner: 'interactive surface owner' })
@@ -297,40 +302,49 @@ function activateAction(event: MouseEvent): void {
     :data-radius="radius"
     :data-fill="fill"
     :data-appearance="appearance"
+    :data-actions-layout="actionsLayout"
+    :data-has-actions="Boolean(slots.actions) || undefined"
     :data-selected="selected || undefined"
     :data-pressed="surfacePressed"
     :data-disabled="surfaceDisabled || undefined"
     :data-content-align="contentAlign"
   >
-    <button
-      v-if="surfaceMode === 'action'"
-      v-bind="activationBindings()"
-      class="s-interactive-surface__activation"
-      type="button"
-      :disabled="surfaceDisabled"
-      :aria-label="resolvedAccessibleLabel"
-      :aria-pressed="surfacePressed"
-      @click="activateAction"
-    >
-      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-    </button>
-    <component
-      v-else-if="surfaceMode === 'link'"
-      :is="linkComponent"
-      v-bind="linkBindings()"
-      class="s-interactive-surface__activation"
-      :aria-label="resolvedAccessibleLabel"
-      :aria-current="selected ? 'page' : undefined"
-      :aria-disabled="surfaceDisabled || undefined"
-      :tabindex="surfaceDisabled ? -1 : undefined"
-      @click="activateLink"
-    >
-      <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
-    </component>
-    <div class="s-interactive-surface__content" data-passive-content="">
-      <PassiveContentBoundary :contract="passiveContentContract">
-        <slot />
-      </PassiveContentBoundary>
+    <div class="s-interactive-surface__layout">
+      <div class="s-interactive-surface__primary">
+        <button
+          v-if="surfaceMode === 'action'"
+          v-bind="activationBindings()"
+          class="s-interactive-surface__activation"
+          type="button"
+          :disabled="surfaceDisabled"
+          :aria-label="resolvedAccessibleLabel"
+          :aria-pressed="surfacePressed"
+          @click="activateAction"
+        >
+          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+        </button>
+        <component
+          v-else-if="surfaceMode === 'link'"
+          :is="linkComponent"
+          v-bind="linkBindings()"
+          class="s-interactive-surface__activation"
+          :aria-label="resolvedAccessibleLabel"
+          :aria-current="selected ? 'page' : undefined"
+          :aria-disabled="surfaceDisabled || undefined"
+          :tabindex="surfaceDisabled ? -1 : undefined"
+          @click="activateLink"
+        >
+          <span class="s-interactive-surface__accessible-label">{{ resolvedAccessibleLabel }}</span>
+        </component>
+        <div class="s-interactive-surface__content" data-passive-content="">
+          <PassiveContentBoundary :contract="passiveContentContract">
+            <slot />
+          </PassiveContentBoundary>
+        </div>
+      </div>
+      <div v-if="$slots.actions" class="s-interactive-surface__actions">
+        <slot name="actions" />
+      </div>
     </div>
   </div>
 </template>

package/src/components/shared/data-display/SActionCard.css

@@ -1,6 +1,10 @@
 @reference "../../../styles/reference.css";
 
-.s-action-card { @apply grid min-h-0 min-w-0 items-start gap-2; grid-template-columns: minmax(0, 1fr) auto; }
+.s-action-card { @apply min-h-0 min-w-0; }
 .s-action-card[data-fill='container'] { @apply h-full w-full; }
 .s-action-card__content { @apply flex min-h-0 min-w-0 w-full flex-1 flex-col; }
-.s-action-card__actions { @apply flex shrink-0 items-center gap-1; }
+.s-action-card__actions { @apply flex min-w-0 max-w-full shrink-0 items-center gap-1; }
+.s-action-card[data-actions-layout='responsive'] .s-action-card__actions,
+.s-action-card[data-actions-layout='stacked'] .s-action-card__actions {
+  @apply w-full;
+}

package/src/components/shared/data-display/SActionCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfaceFill, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
+import type { VNodeChild } from 'vue'
+import type { InteractiveSurfaceActionsLayout, InteractiveSurfaceContract, InteractiveSurfaceDensity, InteractiveSurfaceFill, InteractiveSurfacePadding, InteractiveSurfaceRadius, InteractiveSurfaceTone } from '../controls/SInteractiveSurface.vue'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import SInteractiveSurface from '../controls/SInteractiveSurface.vue'
 
@@ -13,6 +14,7 @@ export interface Props {
   padding?: InteractiveSurfacePadding
   radius?: InteractiveSurfaceRadius
   fill?: InteractiveSurfaceFill
+  actionsLayout?: InteractiveSurfaceActionsLayout
 }
 
 withDefaults(defineProps<Props>(), {
@@ -22,14 +24,19 @@ withDefaults(defineProps<Props>(), {
   padding: 'md',
   radius: 'lg',
   fill: 'content',
+  actionsLayout: 'inline',
 })
 
 const emit = defineEmits<{ activate: [event: MouseEvent] }>()
+defineSlots<{
+  default?: () => VNodeChild
+  actions?: () => VNodeChild
+}>()
 const ownedAttrs = useOwnedAttrs({ component: 'SActionCard', owner: 'action card root' })
 </script>
 
 <template>
-  <div v-bind="ownedAttrs.bindings()" class="s-action-card" :data-has-actions="Boolean($slots.actions) || undefined" :data-fill="fill" :data-mode="surface.mode">
+  <div v-bind="ownedAttrs.bindings()" class="s-action-card" :data-has-actions="Boolean($slots.actions) || undefined" :data-fill="fill" :data-mode="surface.mode" :data-actions-layout="actionsLayout">
     <SInteractiveSurface
       :surface="surface"
       :selected="selected"
@@ -38,11 +45,14 @@ const ownedAttrs = useOwnedAttrs({ component: 'SActionCard', owner: 'action card
       :padding="padding"
       :radius="radius"
       :fill="fill"
+      :actions-layout="actionsLayout"
       @activate="emit('activate', $event)"
     >
       <div class="s-action-card__content"><slot /></div>
+      <template v-if="$slots.actions" #actions>
+        <div class="s-action-card__actions"><slot name="actions" /></div>
+      </template>
     </SInteractiveSurface>
-    <div v-if="$slots.actions" class="s-action-card__actions"><slot name="actions" /></div>
   </div>
 </template>
 

package/src/components/shared/data-display/SActionListItem.css

@@ -1,9 +1,8 @@
 @reference "../../../styles/reference.css";
 
 .s-action-list-item {
-  @apply grid min-h-12 min-w-0 items-center gap-2;
+  @apply min-h-12 min-w-0;
   height: max-content;
-  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 .s-action-list-item[data-height-mode='fill'] {
@@ -94,7 +93,7 @@
 .s-action-list-item[data-density='compact'] .s-action-list-item__icon { @apply h-7 w-7; }
 
 .s-action-list-item[data-trailing-layout='stacked'] {
-  grid-template-columns: minmax(0, 1fr);
+  @apply w-full;
 }
 
 .s-action-list-item[data-trailing-layout='stacked'] .s-action-list-item__trailing {
@@ -103,12 +102,12 @@
 }
 
 @container (max-width: 32rem) {
-  .s-action-list-item[data-trailing-layout='responsive'] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
   .s-action-list-item[data-trailing-layout='responsive'] .s-action-list-item__trailing {
-    @apply w-full justify-end pb-2 pr-2;
+    @apply w-full flex-wrap justify-end gap-y-1 pb-2 pr-2;
     padding-left: calc(3.5rem + var(--s-action-list-item-indent));
   }
+
+  .s-action-list-item[data-trailing-layout='responsive'] .s-action-list-item__trailing > * {
+    max-width: 100%;
+  }
 }

package/src/components/shared/data-display/SActionListItem.vue

@@ -194,6 +194,7 @@ function emitAction(event: MouseEvent): void {
       :padding="surfacePadding"
       :radius="surfaceRadius"
       :fill="heightMode === 'fill' ? 'container' : 'content'"
+      :actions-layout="trailingLayout"
       @activate="emit('activate', $event)"
     >
       <div class="s-action-list-item__main" :class="{ 's-action-list-item__main--static': resolvedMode === 'static' }">
@@ -212,25 +213,27 @@ function emitAction(event: MouseEvent): void {
           </span>
         </span>
       </div>
+      <template v-if="hasTrailing" #actions>
+        <div class="s-action-list-item__trailing">
+          <slot name="status" />
+          <SBadge v-if="statusLabel" :severity="statusSeverity">{{ statusLabel }}</SBadge>
+          <SBadge v-for="badge in validatedBadges" :key="badge.id" :severity="badge.severity">
+            {{ badge.label }}
+          </SBadge>
+          <SButton
+            v-if="actionLabel"
+            size="sm"
+            :label="actionLabel"
+            :leading-icon="actionIcon"
+            :severity="actionSeverity"
+            :disabled="surfaceDisabled || actionDisabled"
+            @click="emitAction"
+          />
+          <slot name="actions" :disabled="surfaceDisabled || actionDisabled" :emit-action="emitAction" />
+          <component :is="trailingIcon" v-if="trailingIcon" class="s-action-list-item__trailing-icon" aria-hidden="true" />
+        </div>
+      </template>
     </SActionCard>
-    <div v-if="hasTrailing" class="s-action-list-item__trailing">
-      <slot name="status" />
-      <SBadge v-if="statusLabel" :severity="statusSeverity">{{ statusLabel }}</SBadge>
-      <SBadge v-for="badge in validatedBadges" :key="badge.id" :severity="badge.severity">
-        {{ badge.label }}
-      </SBadge>
-      <SButton
-        v-if="actionLabel"
-        size="sm"
-        :label="actionLabel"
-        :leading-icon="actionIcon"
-        :severity="actionSeverity"
-        :disabled="surfaceDisabled || actionDisabled"
-        @click="emitAction"
-      />
-      <slot name="actions" :disabled="surfaceDisabled || actionDisabled" :emit-action="emitAction" />
-      <component :is="trailingIcon" v-if="trailingIcon" class="s-action-list-item__trailing-icon" aria-hidden="true" />
-    </div>
   </div>
 </template>
 

package/src/components/shared/data-display/SChart.vue

@@ -352,7 +352,7 @@ watchEffect(() => {
             :y="tick.position"
             text-anchor="end"
             dominant-baseline="middle"
-          >{{ tick.label }}</text>
+          >{{ tick.displayLabel }}<title v-if="tick.displayLabel !== tick.label">{{ tick.label }}</title></text>
           <text
             v-if="validatedYAxisLabel"
             class="s-chart__axis-title"
@@ -369,7 +369,7 @@ watchEffect(() => {
             :key="category.key"
             :x="category.x"
             :y="model.plotY + model.plotHeight + 18"
-            text-anchor="middle"
+            :text-anchor="category.textAnchor"
           >
             <tspan
               v-for="(line, lineIndex) in category.lines"

package/src/components/shared/data-display/SChip.css

@@ -8,12 +8,17 @@
 .s-chip[data-mode='action']:not([data-s-pill-disabled='true']),
 .s-chip[data-mode='link']:not([data-s-pill-disabled='true']) {
   @apply cursor-pointer;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent);
   transition:
-    filter var(--s-motion-standard) ease,
     box-shadow var(--s-motion-standard) ease;
 }
 
 .s-chip[data-mode='action']:not([data-s-pill-disabled='true']):hover,
 .s-chip[data-mode='link']:not([data-s-pill-disabled='true']):hover {
-  filter: brightness(0.96);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 68%, transparent);
+}
+
+.s-chip[data-mode='action']:active,
+.s-chip[data-mode='link']:active {
+  box-shadow: inset 0 0 0 1px currentColor;
 }

package/src/internal/chartGeometry.ts

@@ -79,6 +79,7 @@ export interface ChartLegendItem {
 export interface ChartTick {
   readonly value: number
   readonly label: string
+  readonly displayLabel: string
   readonly position: number
 }
 
@@ -87,6 +88,7 @@ export interface ChartCategoryLabel {
   readonly label: string
   readonly lines: readonly string[]
   readonly x: number
+  readonly textAnchor: 'start' | 'middle' | 'end'
 }
 
 export interface ChartGridLine {
@@ -158,6 +160,12 @@ interface PlotRect {
   readonly height: number
 }
 
+interface ResolvedDomain {
+  readonly minimum: number
+  readonly maximum: number
+  readonly ticks: readonly number[]
+}
+
 const SIZE_DIMENSIONS: Readonly<Record<SChartSize, ChartDimensions>> = {
   compact: { width: 360, height: 96 },
   sm: { width: 640, height: 240 },
@@ -393,6 +401,7 @@ function resolvePlot(
   xAxis: boolean,
   yAxis: boolean,
   dataLabels: SChartDataLabels,
+  yTickLabels: readonly string[],
 ): PlotRect {
   if (type === 'pie' || type === 'donut') {
     const inset = size === 'compact' ? 4 : 12
@@ -403,7 +412,15 @@ function resolvePlot(
     : (size === 'compact' ? 14 : 24)
   const right = size === 'compact' ? 6 : 16
   const bottom = xAxis ? (size === 'compact' ? 32 : 48) : (size === 'compact' ? 5 : 12)
-  const left = yAxis ? (size === 'compact' ? 34 : 54) : (size === 'compact' ? 6 : 14)
+  const defaultLeft = yAxis ? (size === 'compact' ? 34 : 54) : (size === 'compact' ? 6 : 14)
+  const tickFontSize = size === 'compact' ? 9 : 11
+  const tickWidth = yAxis
+    ? Math.max(0, ...yTickLabels.map((label) => estimateAxisTextWidth(label, tickFontSize)))
+    : 0
+  const desiredLeft = yAxis ? Math.max(defaultLeft, Math.ceil(tickWidth + 16)) : defaultLeft
+  const minimumPlotWidth = Math.min(size === 'compact' ? 72 : 120, dimensions.width * 0.4)
+  const maximumLeft = Math.max(0, dimensions.width - right - minimumPlotWidth)
+  const left = Math.min(desiredLeft, maximumLeft)
   return {
     x: left,
     y: top,
@@ -412,6 +429,28 @@ function resolvePlot(
   }
 }
 
+function estimateAxisTextWidth(label: string, fontSize: number): number {
+  const units = Array.from(label).reduce((total, character) => {
+    if (/\s/u.test(character)) return total + 0.36
+    if (/[.,:;!|ilI1'`]/u.test(character)) return total + 0.34
+    if (/[MW@%ШЩЖЮ]/u.test(character)) return total + 0.92
+    return total + 0.62
+  }, 0)
+  return units * fontSize
+}
+
+function truncateAxisLabelToWidth(label: string, availableWidth: number, fontSize: number): string {
+  if (estimateAxisTextWidth(label, fontSize) <= availableWidth) return label
+  const ellipsis = '…'
+  const characters = Array.from(label)
+  while (characters.length > 0) {
+    const candidate = `${characters.join('')}${ellipsis}`
+    if (estimateAxisTextWidth(candidate, fontSize) <= availableWidth) return candidate
+    characters.pop()
+  }
+  return ellipsis
+}
+
 function truncateAxisWord(word: string, maximumCharacters: number): string {
   if (word.length <= maximumCharacters) return word
   return `${word.slice(0, Math.max(1, maximumCharacters - 1))}…`
@@ -461,16 +500,9 @@ function cartesianModel(
   series: readonly SChartSeries[],
   dimensions: ChartDimensions,
   plot: PlotRect,
+  resolvedDomain: ResolvedDomain,
+  yTickLabels: readonly string[],
 ): Omit<ChartModel, 'empty' | 'emptyReason' | 'slices' | 'centerX' | 'centerY'> {
-  const domainValues = input.type === 'bar' && input.barMode === 'stacked'
-    ? resolveStackedDomainValues(series, categories.length)
-    : series.flatMap((item) => [...item.values])
-  const resolvedDomain = resolveDomain(
-    input.domain,
-    domainValues,
-    input.type === 'bar' || input.type === 'area',
-    input.yTickCount,
-  )
   const range = resolvedDomain.maximum - resolvedDomain.minimum
   const yAt = (value: number): number => plot.y + plot.height - ((value - resolvedDomain.minimum) / range) * plot.height
   const baselineY = Math.max(plot.y, Math.min(plot.y + plot.height, yAt(0)))
@@ -552,17 +584,57 @@ function cartesianModel(
     if (input.xLabels === 'endpoints') return index === 0 || index === categories.length - 1
     return categories.length <= 6 || index === 0 || index === categories.length - 1
   }
-  const xLabels = categories.flatMap((category, index) => showXLabel(index)
-    ? [{
+  const visibleCategories = categories
+    .map((category, index) => ({ category, index, x: xAt(index) }))
+    .filter(({ index }) => showXLabel(index))
+  const xLabels = visibleCategories.map(({ category, x }, visibleIndex): ChartCategoryLabel => {
+    const previous = visibleCategories[visibleIndex - 1]
+    const next = visibleCategories[visibleIndex + 1]
+    if (visibleCategories.length === 1) {
+      return {
+        key: category.key,
+        label: category.label,
+        lines: wrapAxisLabel(category.label, plot.width),
+        x: plot.x + plot.width / 2,
+        textAnchor: 'middle',
+      }
+    }
+    if (!previous) {
+      const rightBoundary = (x + next!.x) / 2
+      return {
+        key: category.key,
+        label: category.label,
+        lines: wrapAxisLabel(category.label, rightBoundary - plot.x),
+        x: plot.x,
+        textAnchor: 'start',
+      }
+    }
+    if (!next) {
+      const leftBoundary = (previous.x + x) / 2
+      return {
         key: category.key,
         label: category.label,
-        lines: wrapAxisLabel(category.label, categoryBand),
-        x: xAt(index),
-      }]
-    : [])
-  const yTicks = resolvedDomain.ticks.map((value) => ({
+        lines: wrapAxisLabel(category.label, plot.x + plot.width - leftBoundary),
+        x: plot.x + plot.width,
+        textAnchor: 'end',
+      }
+    }
+    const leftBoundary = (previous.x + x) / 2
+    const rightBoundary = (x + next.x) / 2
+    return {
+      key: category.key,
+      label: category.label,
+      lines: wrapAxisLabel(category.label, 2 * Math.min(x - leftBoundary, rightBoundary - x)),
+      x,
+      textAnchor: 'middle',
+    }
+  })
+  const tickFontSize = input.size === 'compact' ? 9 : 11
+  const tickLabelWidth = Math.max(1, plot.x - 16)
+  const yTicks = resolvedDomain.ticks.map((value, index) => ({
     value,
-    label: formatValue(input.valueFormatter, value, `yTick.${value}`),
+    label: yTickLabels[index]!,
+    displayLabel: truncateAxisLabelToWidth(yTickLabels[index]!, tickLabelWidth, tickFontSize),
     position: yAt(value),
   }))
   const horizontalGrid = yTicks.map((tick) => ({
@@ -725,6 +797,32 @@ export function resolveChartModel(input: ResolveChartModelInput): ChartModel {
       centerY: dimensions.height / 2,
     }
   }
+  if (input.type === 'pie' || input.type === 'donut') {
+    const plot = resolvePlot(
+      dimensions,
+      input.type,
+      input.size,
+      input.xAxis,
+      input.yAxis,
+      input.dataLabels,
+      [],
+    )
+    return radialModel(input, categories, series, dimensions, plot)
+  }
+  const domainValues = input.type === 'bar' && input.barMode === 'stacked'
+    ? resolveStackedDomainValues(series, categories.length)
+    : series.flatMap((item) => [...item.values])
+  const resolvedDomain = resolveDomain(
+    input.domain,
+    domainValues,
+    input.type === 'bar' || input.type === 'area',
+    input.yTickCount,
+  )
+  const yTickLabels = resolvedDomain.ticks.map((value) => formatValue(
+    input.valueFormatter,
+    value,
+    `yTick.${value}`,
+  ))
   const plot = resolvePlot(
     dimensions,
     input.type,
@@ -732,11 +830,17 @@ export function resolveChartModel(input: ResolveChartModelInput): ChartModel {
     input.xAxis,
     input.yAxis,
     input.dataLabels,
+    yTickLabels,
+  )
+  const model = cartesianModel(
+    input,
+    categories,
+    series,
+    dimensions,
+    plot,
+    resolvedDomain,
+    yTickLabels,
   )
-  if (input.type === 'pie' || input.type === 'donut') {
-    return radialModel(input, categories, series, dimensions, plot)
-  }
-  const model = cartesianModel(input, categories, series, dimensions, plot)
   return {
     ...model,
     empty: false,