@rynt/sdk 0.9.53

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

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="open" :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  const props = withDefaults(
+    defineProps<{
+      open?: boolean;
+      placement?: 'top' | 'bottom' | 'left' | 'right';
+      class?: string;
+    }>(),
+    {
+      open: true,
+      placement: 'bottom',
+    },
+  );
+
+  const placementClasses = {
+    top: 'bottom-full mb-2',
+    bottom: 'top-full mt-2',
+    left: 'right-full mr-2',
+    right: 'left-full ml-2',
+  };
+
+  const classes = computed(() =>
+    cn(
+      'absolute z-50 min-w-48 border border-border bg-surface-solid p-2 shadow-xl',
+      placementClasses[props.placement],
+      props.class,
+    ),
+  );
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <Block
+    class="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center"
+  >
+    <slot />
+  </Block>
+</template>
+
+<script setup lang="ts">
+import Block from '../primitives/Block.vue';
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    cols?: 1 | 2 | 3 | 4;
+    gap?: 'sm' | 'md' | 'lg';
+    class?: string;
+  }>(),
+  {
+    cols: 2,
+    gap: 'md',
+  },
+);
+
+const colClasses = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 md:grid-cols-2',
+  /** Три колонки с lg — xl слише поздно для типичных окон лаунчера (останавливалось на двух между md и xl). */
+  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gapClasses = {
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+};
+
+const classes = computed(() =>
+  cn('grid', colClasses[props.cols], gapClasses[props.gap], props.class),
+);
+</script>

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

@@ -0,0 +1,59 @@
+<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';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between';
+    wrap?: boolean;
+    class?: string;
+  }>(),
+  {
+    gap: 'sm',
+    align: 'center',
+    justify: 'start',
+    wrap: false,
+  },
+);
+
+const gapClasses = {
+  none: 'gap-0',
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-4',
+  lg: 'gap-6',
+};
+
+const alignClasses = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+};
+
+const justifyClasses = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between',
+};
+
+const classes = computed(() =>
+  cn(
+    'flex',
+    gapClasses[props.gap],
+    alignClasses[props.align],
+    justifyClasses[props.justify],
+    props.wrap && 'flex-wrap',
+    props.class,
+  ),
+);
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <Block :class="wrapperClass">
+    <Icon
+      :name="icon"
+      size="lg"
+      class="mx-auto mb-2 animate-spin text-accent-secondary"
+    />
+    <Text class="text-muted-foreground">{{ message }}</Text>
+  </Block>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+import { Icon } from '../base';
+import Block from '../primitives/Block.vue';
+import Text from '../primitives/Text.vue';
+
+const props = withDefaults(
+  defineProps<{
+    message: string;
+    icon?: string;
+    density?: 'comfortable' | 'compact';
+    containerClass?: string;
+  }>(),
+  {
+    icon: 'refresh-cw',
+    density: 'comfortable',
+  },
+);
+
+const wrapperClass = computed(() =>
+  cn(
+    'flex flex-col items-center justify-center text-center',
+    props.density === 'comfortable' ? 'py-12' : 'py-8',
+    props.containerClass,
+  ),
+);
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div :class="classes">
+    <img v-if="src" :src="src" :alt="alt" class="h-full w-full object-cover" />
+    <slot v-else>
+      <Icon v-if="icon" :name="icon" :size="iconSize" class="text-accent-secondary/55" />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '../base';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    src?: string | null;
+    alt?: string;
+    icon?: string;
+    size?: 'sm' | 'md' | 'lg' | 'wide' | 'fill';
+    iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    class?: string;
+  }>(),
+  {
+    alt: '',
+    icon: 'image',
+    size: 'md',
+    iconSize: 'md',
+  },
+);
+
+const sizeClasses = {
+  sm: 'h-8 w-8',
+  md: 'h-12 w-12',
+  lg: 'h-24 w-24',
+  wide: 'aspect-video w-full',
+  fill: 'h-full w-full',
+};
+
+const classes = computed(() =>
+  cn(
+    'flex shrink-0 items-center justify-center overflow-hidden bg-gradient-to-br from-primary to-accent-secondary',
+    sizeClasses[props.size],
+    props.class,
+  ),
+);
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <div v-if="open" :class="classes" @click.self="$emit('close')">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean;
+    class?: string;
+  }>(),
+  {
+    open: true,
+  },
+);
+
+defineEmits<{
+  close: [];
+}>();
+
+const classes = computed(() =>
+  cn('fixed inset-0 z-40 bg-foreground/55 p-4', props.class),
+);
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <Block class="text-center max-w-md mx-4">
+    <Icon
+      name="refresh-cw"
+      size="xl"
+      class="mx-auto mb-4 animate-spin text-accent-secondary"
+    />
+    <Text class="text-foreground font-medium mb-1">{{ title }}</Text>
+    <Text v-if="subtitle" class="text-muted-foreground text-sm">{{ subtitle }}</Text>
+  </Block>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '../base';
+import Block from '../primitives/Block.vue';
+import Text from '../primitives/Text.vue';
+
+defineProps<{
+  title: string;
+  subtitle?: string;
+}>();
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <section :class="classes">
+    <div v-if="title || description || $slots.actions" class="flex items-start justify-between gap-4">
+      <div>
+        <h2 v-if="title" class="text-base font-semibold text-foreground">
+          {{ title }}
+        </h2>
+        <p v-if="description" class="mt-1 text-sm text-muted-foreground">
+          {{ description }}
+        </p>
+      </div>
+      <div v-if="$slots.actions" class="flex items-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    spacing?: 'sm' | 'md' | 'lg';
+    class?: string;
+  }>(),
+  {
+    spacing: 'md',
+  },
+);
+
+const spacingClasses = {
+  sm: 'space-y-3',
+  md: 'space-y-4',
+  lg: 'space-y-6',
+};
+
+const classes = computed(() => cn(spacingClasses[props.spacing], props.class));
+</script>

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

@@ -0,0 +1,29 @@
+<template>
+  <Block class="flex items-center justify-between">
+    <Block>
+      <Heading :level="level" class="text-2xl font-bold text-foreground mb-1">
+        {{ title }}
+      </Heading>
+      <Text v-if="description" class="text-muted-foreground text-sm">{{ description }}</Text>
+      <slot name="below-description" />
+    </Block>
+    <slot name="actions" />
+  </Block>
+</template>
+
+<script setup lang="ts">
+import Block from '../primitives/Block.vue';
+import Heading from '../primitives/Heading.vue';
+import Text from '../primitives/Text.vue';
+
+withDefaults(
+  defineProps<{
+    title: string;
+    description?: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+  }>(),
+  {
+    level: 2,
+  },
+);
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <div :class="panelClasses" :style="angularStyle">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    variant?: 'default' | 'accent';
+    angular?: boolean;
+    class?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    variant: 'default',
+    angular: true,
+  });
+
+  const panelClasses = computed(() => {
+    const baseClasses =
+      'h-full overflow-y-auto border-l border-primary/14 bg-card/98 p-3.5 shadow-[inset_1px_0_0_color-mix(in_srgb,var(--primary)_22%,transparent)]';
+    
+    const variantClasses = {
+      default: '',
+      accent: 'bg-gradient-to-b from-primary/6 to-transparent bg-card/95',
+    };
+
+    return cn(baseClasses, variantClasses[props.variant], props.class);
+  });
+
+  const angularStyle = computed(() => {
+    // Убрали clip-path для панелей
+    return {};
+  });
+</script>
+

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

@@ -0,0 +1,49 @@
+<template>
+  <div :class="classes">
+    <div
+      v-if="label || showValue"
+      class="flex items-center justify-between text-xs text-muted-foreground"
+    >
+      <span>{{ label }}</span>
+      <span v-if="showValue">{{ normalizedValue }}%</span>
+    </div>
+    <div class="h-2 overflow-hidden rounded bg-muted">
+      <div :class="barClasses" :style="{ width: `${normalizedValue}%` }" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  const props = withDefaults(
+    defineProps<{
+      value: number;
+      label?: string;
+      showValue?: boolean;
+      tone?: 'primary' | 'success' | 'warning' | 'danger';
+      class?: string;
+    }>(),
+    {
+      showValue: false,
+      tone: 'primary',
+    },
+  );
+
+  const normalizedValue = computed(() =>
+    Math.max(0, Math.min(100, Math.round(props.value))),
+  );
+
+  const toneClasses = {
+    primary: 'rnt-fill-primary',
+    success: 'rnt-fill-success',
+    warning: 'rnt-fill-warning',
+    danger: 'rnt-fill-danger',
+  };
+
+  const classes = computed(() => cn('space-y-2', props.class));
+  const barClasses = computed(() =>
+    cn('h-full rounded transition-all duration-300', toneClasses[props.tone]),
+  );
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <section :class="sectionClasses">
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  interface Props {
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+    class?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    spacing: 'md',
+  });
+
+  const stackModifier = {
+    none: 'rnt-section-stack--none',
+    sm: 'rnt-section-stack--sm',
+    md: 'rnt-section-stack--md',
+    lg: 'rnt-section-stack--lg',
+  } as const satisfies Record<NonNullable<Props['spacing']>, string>;
+
+  const sectionClasses = computed(() => {
+    return cn('rnt-section-stack', stackModifier[props.spacing], props.class);
+  });
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <Block
+    :class="
+      cn(
+        'flex items-center gap-2 bg-muted/70 border border-border rounded p-1 w-fit',
+        containerClass,
+      )
+    "
+  >
+    <Button
+      v-for="opt in options"
+      :key="opt.value"
+      :variant="modelValue === opt.value ? 'primary' : 'secondary'"
+      size="sm"
+      class="!px-4"
+      @click="emit('update:modelValue', opt.value)"
+    >
+      {{ opt.label }}
+    </Button>
+  </Block>
+</template>
+
+<script setup lang="ts">
+  import { cn } from '../../utils/cn';
+  import { Button } from '../base';
+  import Block from '../primitives/Block.vue';
+
+  export interface SegmentedOption {
+    value: string;
+    label: string;
+  }
+
+  defineProps<{
+    modelValue: string;
+    options: SegmentedOption[];
+    /** Tailwind / cn классы для обёртки (избегаем имени `class`) */
+    containerClass?: string;
+  }>();
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: string];
+  }>();
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <Card
+    :variant="disabled ? 'default' : 'hover'"
+    :class="classes"
+    @click="handleClick"
+  >
+    <slot />
+  </Card>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import Card from './Card.vue';
+  import { cn } from '../../utils/cn';
+
+  const props = withDefaults(
+    defineProps<{
+      selected?: boolean;
+      disabled?: boolean;
+      class?: string;
+    }>(),
+    {
+      selected: false,
+      disabled: false,
+    },
+  );
+
+  const emit = defineEmits<{
+    select: [];
+  }>();
+
+  const classes = computed(() =>
+    cn(
+      '!border transition-all duration-200',
+      props.selected
+        ? '!border-primary bg-primary/[0.14] ring-2 ring-primary/35 ring-offset-2 ring-offset-background'
+        : '!border-primary/14',
+      props.disabled && 'cursor-not-allowed opacity-50',
+      props.class,
+    ),
+  );
+
+  const handleClick = () => {
+    if (!props.disabled) emit('select');
+  };
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <div :class="classes" @click="handleClick">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { cn } from '../../utils/cn';
+
+  const props = withDefaults(
+    defineProps<{
+      selected?: boolean;
+      disabled?: boolean;
+      class?: string;
+    }>(),
+    {
+      selected: false,
+      disabled: false,
+    },
+  );
+
+  const emit = defineEmits<{
+    select: [];
+  }>();
+
+  const classes = computed(() =>
+    cn(
+      'border p-3 transition-colors',
+      props.selected
+        ? 'border-primary bg-primary/10'
+        : 'border-border bg-surface-overlay hover:border-accent-secondary/50',
+      props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+      props.class,
+    ),
+  );
+
+  const handleClick = () => {
+    if (!props.disabled) emit('select');
+  };
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div
+    aria-hidden="true"
+    :class="cn('animate-pulse rounded-md', props.class)"
+    :style="mergedStyle"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+import { skeletonBarSurfaceStyle } from './skeletonSurfaceStyles';
+
+const props = defineProps<{
+  class?: string;
+  width?: string;
+  height?: string;
+}>();
+
+const mergedStyle = computed(() => ({
+  ...skeletonBarSurfaceStyle(),
+  ...(props.width ? { width: props.width } : {}),
+  ...(props.height ? { height: props.height } : {}),
+}));
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <Skeleton
+    :class="cn('shrink-0 rounded-full', sizeClass)"
+    aria-hidden="true"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../utils/cn';
+import Skeleton from './Skeleton.vue';
+
+const props = withDefaults(
+  defineProps<{
+    size?: 'sm' | 'md' | 'lg';
+  }>(),
+  { size: 'md' },
+);
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-8 w-8';
+    case 'lg':
+      return 'h-12 w-12';
+    default:
+      return 'h-10 w-10';
+  }
+});
+</script>