@rynt/sdk 0.9.53

package/src/shared/ui/layout/SkeletonEntityCard.vue

@@ -0,0 +1,20 @@
+<template>
+  <Block
+    class="overflow-hidden rounded p-3"
+    :style="skeletonCardStyle"
+    aria-hidden="true"
+  >
+    <Skeleton class="mb-3 aspect-video w-full rounded" />
+    <Skeleton class="mb-2 h-4 w-3/4 max-w-[200px]" />
+    <Skeleton class="mb-1.5 h-3 w-full" />
+    <Skeleton class="h-3 w-2/3 max-w-[160px]" />
+  </Block>
+</template>
+
+<script setup lang="ts">
+  import Block from '../primitives/Block.vue';
+  import Skeleton from './Skeleton.vue';
+  import { skeletonPanelShellStyle } from './skeletonSurfaceStyles';
+
+  const skeletonCardStyle = skeletonPanelShellStyle('25%', '14%');
+</script>

package/src/shared/ui/layout/SkeletonFeedPost.vue

@@ -0,0 +1,22 @@
+<template>
+  <Block
+    class="overflow-hidden rounded"
+    :style="skeletonPostShellStyle"
+    aria-hidden="true"
+  >
+    <Skeleton class="aspect-[21/9] w-full max-h-36 rounded" />
+    <Block class="space-y-2 p-3">
+      <Skeleton class="h-4 w-[80%] max-w-[280px]" />
+      <Skeleton class="h-3 w-full" />
+      <Skeleton class="h-3 w-3/5 max-w-[200px]" />
+    </Block>
+  </Block>
+</template>
+
+<script setup lang="ts">
+  import Block from '../primitives/Block.vue';
+  import Skeleton from './Skeleton.vue';
+  import { skeletonPanelShellStyle } from './skeletonSurfaceStyles';
+
+  const skeletonPostShellStyle = skeletonPanelShellStyle('20%', '14%');
+</script>

package/src/shared/ui/layout/SkeletonGrid.vue

@@ -0,0 +1,18 @@
+<template>
+  <Grid :cols="cols" gap="sm" class="!gap-3">
+    <SkeletonEntityCard v-for="i in count" :key="i" />
+  </Grid>
+</template>
+
+<script setup lang="ts">
+import Grid from './Grid.vue';
+import SkeletonEntityCard from './SkeletonEntityCard.vue';
+
+withDefaults(
+  defineProps<{
+    count?: number;
+    cols?: 1 | 2 | 3 | 4;
+  }>(),
+  { count: 8, cols: 3 },
+);
+</script>

package/src/shared/ui/layout/SkeletonListRow.vue

@@ -0,0 +1,31 @@
+<template>
+  <Inline
+    class="w-full items-center gap-3 rounded-md px-3 py-2.5"
+    gap="md"
+    :style="skeletonRowShellStyle"
+    aria-hidden="true"
+  >
+    <SkeletonAvatar :size="avatarSize" />
+    <Block class="min-w-0 flex-1 space-y-2">
+      <Skeleton class="h-3.5 w-[45%] max-w-[200px]" />
+      <Skeleton class="h-3 w-[70%] max-w-[260px]" />
+    </Block>
+  </Inline>
+</template>
+
+<script setup lang="ts">
+import Block from '../primitives/Block.vue';
+import Inline from './Inline.vue';
+import Skeleton from './Skeleton.vue';
+import SkeletonAvatar from './SkeletonAvatar.vue';
+import { skeletonPanelShellStyle } from './skeletonSurfaceStyles';
+
+const skeletonRowShellStyle = skeletonPanelShellStyle('20%', '12%');
+
+withDefaults(
+  defineProps<{
+    avatarSize?: 'sm' | 'md' | 'lg';
+  }>(),
+  { avatarSize: 'md' },
+);
+</script>

package/src/shared/ui/layout/SkeletonText.vue

@@ -0,0 +1,25 @@
+<template>
+  <Block class="w-full space-y-2" aria-hidden="true">
+    <Skeleton
+      v-for="line in lines"
+      :key="line"
+      :class="cn('h-3.5', line === lines && lines > 1 ? 'max-w-[55%]' : 'w-full')"
+    />
+  </Block>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+import Block from '../primitives/Block.vue';
+import Skeleton from './Skeleton.vue';
+
+const props = withDefaults(
+  defineProps<{
+    lines?: 1 | 2 | 3;
+  }>(),
+  { lines: 2 },
+);
+
+const lines = computed(() => props.lines);
+</script>

package/src/shared/ui/layout/Stack.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    align?: 'stretch' | 'start' | 'center' | 'end';
+    class?: string;
+  }>(),
+  {
+    gap: 'md',
+    align: 'stretch',
+  },
+);
+
+const gapClasses = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+  xl: 'gap-8',
+};
+
+const alignClasses = {
+  stretch: 'items-stretch',
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+};
+
+const classes = computed(() =>
+  cn('flex flex-col', gapClasses[props.gap], alignClasses[props.align], props.class),
+);
+</script>

package/src/shared/ui/layout/StateBlock.vue

@@ -0,0 +1,44 @@
+<template>
+  <div :class="classes">
+    <Icon v-if="icon" :name="icon" size="xl" class="mx-auto text-subtle-fg" />
+    <h3 v-if="title" class="text-base font-semibold text-foreground">
+      {{ title }}
+    </h3>
+    <p v-if="description" class="text-sm text-muted-foreground">
+      {{ description }}
+    </p>
+    <div v-if="$slots.actions" class="mt-2 flex justify-center">
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '../base';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    icon?: string;
+    title?: string;
+    description?: string;
+    tone?: 'default' | 'error' | 'warning';
+    class?: string;
+  }>(),
+  {
+    tone: 'default',
+  },
+);
+
+const toneClasses = {
+  default: 'text-muted-foreground',
+  error: 'text-red-400',
+  warning: 'text-yellow-400',
+};
+
+const classes = computed(() =>
+  cn('py-8 text-center space-y-2', toneClasses[props.tone], props.class),
+);
+</script>

package/src/shared/ui/layout/TwoPaneLayout.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :class="classes">
+    <aside :class="leftClasses">
+      <slot name="left" />
+    </aside>
+    <main class="min-w-0 flex-1">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    leftWidth?: 'sm' | 'md' | 'lg';
+    class?: string;
+    leftClass?: string;
+  }>(),
+  {
+    leftWidth: 'md',
+  },
+);
+
+const widthClasses = {
+  sm: 'md:w-56',
+  md: 'md:w-72',
+  lg: 'md:w-96',
+};
+
+const classes = computed(() => cn('grid gap-4 md:flex', props.class));
+const leftClasses = computed(() => cn('min-w-0 shrink-0', widthClasses[props.leftWidth], props.leftClass));
+</script>

package/src/shared/ui/layout/VirtualList.vue

@@ -0,0 +1,160 @@
+<template>
+  <div
+    ref="rootRef"
+    class="min-h-0 w-full overflow-y-auto overscroll-y-contain"
+    :class="containerClass"
+    @scroll.passive="onScroll"
+  >
+    <div
+      class="relative w-full"
+      :style="{ height: `${totalHeight}px` }"
+    >
+      <div
+        class="absolute left-0 right-0 top-0 will-change-transform"
+        :style="{ transform: `translate3d(0, ${offsetY}px, 0)` }"
+      >
+        <div
+          v-for="(item, i) in visibleSlice"
+          :key="itemKey(item, startIndex + i)"
+          :style="rowStyle(startIndex + i)"
+        >
+          <slot
+            name="default"
+            :item="item"
+            :index="startIndex + i"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="hasAfterSlot"
+      ref="afterRef"
+      class="w-full shrink-0"
+    >
+      <slot name="after" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, watch } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+
+const props = withDefaults(
+  defineProps<{
+    items: readonly unknown[];
+    /** Высота строки контента (px), без межстрочного зазора */
+    itemHeight?: number;
+    /** Зазор снизу у строки (кроме последней) */
+    itemGap?: number;
+    /** Дополнительные строки сверху/снизу вне вьюпорта */
+    overscan?: number;
+    itemKey: (item: unknown, index: number) => string | number | symbol;
+    containerClass?: string;
+  }>(),
+  {
+    itemHeight: 64,
+    itemGap: 4,
+    overscan: 8,
+  },
+);
+
+defineSlots<{
+  default(props: { item: unknown; index: number }): unknown;
+  after(): unknown;
+}>();
+
+const slots = useSlots();
+const hasAfterSlot = computed(() => !!slots.after);
+
+const rootRef = ref<HTMLElement | null>(null);
+const afterRef = ref<HTMLElement | null>(null);
+const scrollTop = ref(0);
+const viewportHeight = ref(0);
+const afterHeight = ref(0);
+
+const stride = computed(
+  () => props.itemHeight + props.itemGap,
+);
+
+const totalHeight = computed(() => {
+  const n = props.items.length;
+  if (n === 0) return 0;
+  return (n - 1) * stride.value + props.itemHeight;
+});
+
+const scrollContentHeight = computed(
+  () => totalHeight.value + afterHeight.value,
+);
+
+const startIndex = computed(() => {
+  if (props.items.length === 0) return 0;
+  const raw = Math.floor(scrollTop.value / stride.value) - props.overscan;
+  return Math.max(0, raw);
+});
+
+const endIndex = computed(() => {
+  const n = props.items.length;
+  if (n === 0) return -1;
+  const first = Math.floor(scrollTop.value / stride.value);
+  const visibleCount = Math.ceil(viewportHeight.value / stride.value) + 2;
+  const raw = first + visibleCount + props.overscan;
+  return Math.min(n - 1, raw);
+});
+
+const visibleSlice = computed(() => {
+  const n = props.items.length;
+  if (n === 0 || startIndex.value > endIndex.value) return [];
+  if (scrollTop.value >= totalHeight.value) return [];
+  return props.items.slice(startIndex.value, endIndex.value + 1);
+});
+
+const offsetY = computed(() => startIndex.value * stride.value);
+
+function rowStyle(index: number) {
+  const isLast = index === props.items.length - 1;
+  return {
+    height: `${props.itemHeight}px`,
+    marginBottom: isLast ? '0' : `${props.itemGap}px`,
+  };
+}
+
+function onScroll(e: Event) {
+  const el = e.target as HTMLElement;
+  scrollTop.value = el.scrollTop;
+  viewportHeight.value = el.clientHeight;
+}
+
+function measureViewport() {
+  const el = rootRef.value;
+  if (!el) return;
+  viewportHeight.value = el.clientHeight;
+}
+
+function clampScroll() {
+  const el = rootRef.value;
+  if (!el) return;
+  const max = Math.max(0, scrollContentHeight.value - el.clientHeight);
+  if (el.scrollTop > max) el.scrollTop = max;
+}
+
+useResizeObserver(rootRef, () => measureViewport());
+
+useResizeObserver(afterRef, (entries) => {
+  const h = entries[0]?.contentRect.height ?? 0;
+  afterHeight.value = h;
+});
+
+watch(
+  [() => props.items.length, totalHeight, afterHeight],
+  () => clampScroll(),
+);
+
+watch(rootRef, (el) => {
+  if (el) measureViewport();
+});
+
+watch(hasAfterSlot, (on) => {
+  if (!on) afterHeight.value = 0;
+});
+</script>

package/src/shared/ui/layout/index.ts

@@ -0,0 +1,35 @@
+export { default as Container } from './Container.vue';
+export { default as Section } from './Section.vue';
+export { default as Panel } from './Panel.vue';
+export { default as Card } from './Card.vue';
+export { default as Stack } from './Stack.vue';
+export { default as Inline } from './Inline.vue';
+export { default as Grid } from './Grid.vue';
+export { default as PageSection } from './PageSection.vue';
+export { default as StateBlock } from './StateBlock.vue';
+export { default as Callout } from './Callout.vue';
+export { default as BusyOverlay } from './BusyOverlay.vue';
+export { default as EmptyState } from './EmptyState.vue';
+export { default as FullscreenDimmer } from './FullscreenDimmer.vue';
+export { default as LoadingState } from './LoadingState.vue';
+export { default as OverlayWaitPanel } from './OverlayWaitPanel.vue';
+export { default as PageToolbar } from './PageToolbar.vue';
+export { default as ProgressBar } from './ProgressBar.vue';
+export { default as SegmentedControl } from './SegmentedControl.vue';
+export { default as SelectableCard } from './SelectableCard.vue';
+export { default as SelectableRow } from './SelectableRow.vue';
+export { default as MediaBox } from './MediaBox.vue';
+export { default as EntityMediaRow } from './EntityMediaRow.vue';
+export { default as TwoPaneLayout } from './TwoPaneLayout.vue';
+export { default as FilterResultsLayout } from './FilterResultsLayout.vue';
+export { default as FloatingPanel } from './FloatingPanel.vue';
+export { default as OverlayPanel } from './OverlayPanel.vue';
+export { default as Skeleton } from './Skeleton.vue';
+export { default as SkeletonText } from './SkeletonText.vue';
+export { default as SkeletonAvatar } from './SkeletonAvatar.vue';
+
+export { default as SkeletonEntityCard } from './SkeletonEntityCard.vue';
+export { default as SkeletonGrid } from './SkeletonGrid.vue';
+export { default as SkeletonListRow } from './SkeletonListRow.vue';
+export { default as SkeletonFeedPost } from './SkeletonFeedPost.vue';
+export { default as VirtualList } from './VirtualList.vue';

package/src/shared/ui/layout/skeletonSurfaceStyles.ts

@@ -0,0 +1,24 @@
+/**
+ * Обводки/заливки скелетонов через CSS Vars: классы Tailwind из SFC `@rynt/sdk`
+ * могут не попадать в бандл; тогда у `border` остаётся ширина без цвета → solid currentColor (белый текст на dark).
+ */
+
+export function skeletonBarSurfaceStyle(): Record<string, string> {
+  return {
+    boxSizing: 'border-box',
+    backgroundColor: 'color-mix(in srgb, var(--muted) 55%, transparent)',
+    boxShadow:
+      'inset 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent)',
+  };
+}
+
+export function skeletonPanelShellStyle(
+  mutedOpacity: string,
+  borderPrimaryOpacity: string,
+): Record<string, string> {
+  return {
+    boxSizing: 'border-box',
+    border: `1px solid color-mix(in srgb, var(--primary) ${borderPrimaryOpacity}, transparent)`,
+    backgroundColor: `color-mix(in srgb, var(--muted) ${mutedOpacity}, transparent)`,
+  };
+}

package/src/shared/ui/navigation/NavItem.vue

@@ -0,0 +1,139 @@
+<template>
+  <!-- Корневой размер задаём style — spacing из SDK-SFC может не попасть в Tailwind CSS; при только absolute-детях высота без явного height схлопывается в 0. -->
+  <div :style="navItemBoxStyle">
+    <button
+      type="button"
+      class="absolute inset-0 flex cursor-pointer items-center justify-center overflow-hidden border-0 bg-transparent p-0"
+      :style="{ borderRadius: 'var(--radius-ui-md)' }"
+      :title="title"
+      @click="$emit('click')"
+    >
+    <div class="absolute inset-0 group flex items-center justify-center">
+      <!-- Внешний border с градиентом -->
+      <div
+        :class="[
+          'pointer-events-none absolute inset-0',
+          active
+            ? activeGradient
+            : 'bg-transparent group-hover:bg-gradient-to-br group-hover:from-primary group-hover:via-accent-secondary group-hover:to-primary-hover',
+        ]"
+        :style="{ borderRadius: 'var(--radius-ui-md)' }"
+      />
+
+      <!-- Внутренний фон (без transition на фоне — иначе при hover градиент просвечивает между кадрами) -->
+      <div
+        :class="[
+          'pointer-events-none absolute inset-[2px]',
+          active
+            ? 'bg-background'
+            : 'bg-transparent group-hover:bg-background',
+        ]"
+        :style="innerFaceStyle"
+      />
+
+      <!-- Иконка -->
+      <div
+        v-if="!props.image"
+        :class="[
+          'relative z-10 flex shrink-0 items-center justify-center transition-colors',
+          active
+            ? activeColor
+            : 'text-muted-foreground group-hover:text-accent-secondary',
+        ]"
+      >
+        <slot />
+      </div>
+    </div>
+
+    <!-- Статус индикатор (опционально) -->
+    <div v-if="status" class="absolute -top-0.5 -right-0.5 z-20">
+      <StatusIndicator :status="status" size="sm" />
+    </div>
+
+    <!-- Индикатор непрочитанных (опционально) -->
+    <div
+      v-if="badgeCount !== undefined && badgeCount > 0"
+      class="absolute -top-0.5 -right-0.5 z-20"
+    >
+      <div
+        class="h-2 w-2 shrink-0 bg-destructive shadow-[0_0_4px_color-mix(in_srgb,var(--destructive)_55%,transparent)]"
+      />
+    </div>
+  </button>
+
+  <!-- Индикатор активного пункта -->
+  <div
+    v-if="active && showIndicator"
+    class="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-6 bg-accent-secondary -ml-1 shadow-[0_0_8px_color-mix(in_srgb,var(--primary)_55%,transparent)]"
+    style="clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%)"
+  />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { StatusIndicator } from '../base';
+
+  /** 44×44 без Tailwind spacing: `h-11`/`w-11` из SDK-SFC часто не попадают в билд; без явной высоты и с absolute-детьми бокс даёт 44×0 в DevTools. */
+  const navItemBoxStyle = {
+    position: 'relative' as const,
+    width: '2.75rem',
+    height: '2.75rem',
+    minWidth: '2.75rem',
+    minHeight: '2.75rem',
+    flexShrink: 0,
+  };
+
+  interface Props {
+    active?: boolean;
+    title?: string;
+    variant?: 'default' | 'success';
+    status?: 'online' | 'offline';
+    image?: string;
+    showIndicator?: boolean;
+    badgeCount?: number;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    active: false,
+    variant: 'default',
+    showIndicator: true,
+    badgeCount: undefined,
+  });
+
+  /** Рамка 1 px через CSS: утилиты `border-*` из SDK могут не попасть в Tailwind-бандл. Неактивный — как раньше (primary ~16%); активный — прозрачная граница без скачка вёрстки. */
+  const innerFaceStyle = computed(() => {
+    const styles: Record<string, string> = {
+      boxSizing: 'border-box',
+      borderRadius: 'var(--radius-ui-sm)',
+    };
+    if (props.image) {
+      styles.backgroundImage = `url(${props.image})`;
+      styles.backgroundSize = 'cover';
+      styles.backgroundPosition = 'center';
+    }
+    if (!props.active) {
+      styles.border =
+        '1px solid color-mix(in srgb, var(--primary) 16%, transparent)';
+    } else {
+      styles.border = '1px solid transparent';
+    }
+    return styles;
+  });
+
+  const emit = defineEmits<{
+    click: [];
+  }>();
+
+  const activeGradient = computed(() => {
+    return props.variant === 'success'
+      ? 'bg-gradient-to-br from-success via-success/85 to-success/70'
+      : 'bg-gradient-to-br from-primary via-accent-secondary to-primary-hover';
+  });
+
+  const activeColor = computed(() => {
+    return props.variant === 'success'
+      ? 'text-success'
+      : 'text-accent-secondary';
+  });
+</script>

package/src/shared/ui/navigation/Tab.vue

@@ -0,0 +1,61 @@
+<template>
+  <button :class="tabClasses" :disabled="disabled" @click="$emit('click')">
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    active?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'pills' | 'rail';
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    active: false,
+    disabled: false,
+    variant: 'default',
+  });
+
+  const emit = defineEmits<{
+    click: [];
+  }>();
+
+  const tabClasses = computed(() => {
+    if (props.variant === 'rail') {
+      const baseRail =
+        'shrink-0 whitespace-nowrap rounded px-3 py-2.5 text-sm font-medium transition-colors flex items-center gap-2 cursor-pointer border-l-2 [&_svg]:opacity-80';
+      return cn(
+        baseRail,
+        props.active
+          ? 'border-primary bg-primary/10 text-foreground'
+          : 'border-transparent text-muted-foreground hover:bg-card hover:text-foreground',
+        props.disabled && 'opacity-50 cursor-not-allowed',
+      );
+    }
+
+    const baseClasses =
+      'px-3 py-2 transition-colors flex items-center gap-1 cursor-pointer';
+
+    if (props.variant === 'pills') {
+      return cn(
+        baseClasses,
+        props.active
+          ? 'bg-primary text-primary-foreground'
+          : 'bg-surface-overlay text-muted-foreground hover:bg-secondary hover:text-foreground',
+        props.disabled && 'opacity-50 cursor-not-allowed',
+      );
+    }
+
+    return cn(
+      baseClasses,
+      props.active
+        ? 'bg-surface-raised text-foreground'
+        : 'text-muted-foreground hover:text-foreground hover:bg-secondary',
+      props.disabled && 'opacity-50 cursor-not-allowed',
+    );
+  });
+</script>