"use client";
 
import React from 'react'
import { Flex, Frame } from 'ui-lab-components'
import type { FlexProps } from 'ui-lab-components'
import type { ControlDef } from '@/types'
 
type FlexDirection = NonNullable<FlexProps['direction']>;
type FlexJustify = NonNullable<FlexProps['justify']>;
type FlexAlign = NonNullable<FlexProps['align']>;
type FlexGap = NonNullable<FlexProps['gap']>;
type FlexWrap = NonNullable<FlexProps['wrap']>;
 
const BASE_CELL_STYLE = {
  '--frame-fill': 'var(--background-900)',
  '--frame-stroke-color': 'var(--background-600)',
} as React.CSSProperties;
 
export const controls: ControlDef[] = [
  {
    name: 'direction',
    label: 'Main Axis',
    type: 'select',
    options: [
      { label: 'Row', value: 'row' },
      { label: 'Column', value: 'column' },
    ],
    defaultValue: 'row',
  },
  {
    name: 'justify',
    label: 'Main-Axis Distribution',
    type: 'select',
    options: [
      { label: 'Start', value: 'start' },
      { label: 'Center', value: 'center' },
      { label: 'End', value: 'end' },
      { label: 'Space Between', value: 'between' },
      { label: 'Space Around', value: 'around' },
      { label: 'Space Evenly', value: 'evenly' },
    ],
    defaultValue: 'start',
  },
  {
    name: 'align',
    label: 'Cross-Axis Alignment',
    type: 'select',
    options: [
      { label: 'Stretch', value: 'stretch' },
      { label: 'Start', value: 'start' },
      { label: 'Center', value: 'center' },
      { label: 'End', value: 'end' },
      { label: 'Baseline', value: 'baseline' },
    ],
    defaultValue: 'stretch',
  },
  {
    name: 'gap',
    label: 'Gap Token',
    type: 'select',
    options: [
      { label: 'Extra Small', value: 'xs' },
      { label: 'Small', value: 'sm' },
      { label: 'Medium', value: 'md' },
      { label: 'Large', value: 'lg' },
      { label: 'Extra Large', value: 'xl' },
    ],
    defaultValue: 'md',
  },
  {
    name: 'frameCount',
    label: 'Frames',
    type: 'stepper',
    defaultValue: 4,
    min: 4,
    max: 10,
    step: 1,
  },
  {
    name: 'wrap',
    label: 'Overflow Strategy',
    type: 'select',
    options: [
      { label: 'No Wrap', value: 'nowrap' },
      { label: 'Wrap', value: 'wrap' },
    ],
    defaultValue: 'nowrap',
  },
];
 
export const previewLayout = 'start' as const;
export const resizable = true;
 
function getDirection(value: unknown): FlexDirection {
  return value === 'column' ? 'column' : 'row';
}
 
function getJustify(value: unknown): FlexJustify {
  if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly') return value;
  return 'start';
}
 
function getAlign(value: unknown): FlexAlign {
  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;
  return 'stretch';
}
 
function getGap(value: unknown): FlexGap {
  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;
  return 'md';
}
 
function getWrap(value: unknown): FlexWrap {
  return value === 'wrap' ? 'wrap' : 'nowrap';
}
 
function getFrameCount(value: unknown, min: number, max: number, fallback: number) {
  const n = typeof value === 'number' ? value : Number(value);
  if (Number.isNaN(n)) return fallback;
  return Math.min(max, Math.max(min, Math.round(n)));
}
 
function FrameCell({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <Frame pathStroke="dashed" className={className} style={{ ...BASE_CELL_STYLE, ...style }}>
      <div className="size-full" />
    </Frame>
  );
}
 
function getAxisColumnActionSpecs(frameCount: number) {
  const total = Math.max(frameCount - 2, 1);
  const pattern = [
    { className: 'min-w-[4.75rem] flex-1', style: { width: 'auto', minWidth: '4.75rem', height: '2.75rem' } },
    { className: 'min-w-[5.5rem] flex-1', style: { width: 'auto', minWidth: '5.5rem', height: '2.75rem' } },
    { className: 'min-w-[4rem] flex-1', style: { width: 'auto', minWidth: '4rem', height: '3rem' } },
  ];
  return Array.from({ length: total }, (_, i) => pattern[i % pattern.length]);
}
 
function getAxisRowGroups(frameCount: number) {
  const groupCount = Math.max(Math.ceil(frameCount / 4), 1);
  return Array.from({ length: groupCount }, (_, gi) => {
    const remaining = frameCount - gi * 4;
    const itemCount = Math.min(Math.max(remaining, 0), 4);
    return { rail: itemCount >= 1, canvas: itemCount >= 2, actionTop: itemCount >= 3, actionBottom: itemCount >= 4 };
  });
}
 
export function renderPreview(props: Record<string, unknown>) {
  const direction = getDirection(props.direction);
  const justify = getJustify(props.justify);
  const align = getAlign(props.align);
  const gap = getGap(props.gap);
  const wrap = getWrap(props.wrap);
  const frameCount = getFrameCount(props.frameCount, 4, 10, 4);
 
  if (direction === 'row') {
    const groups = getAxisRowGroups(frameCount);
    return (
      <Flex direction="column" justify={justify} align={align} gap={gap} wrap="nowrap" className="w-full">
        {groups.map((group, index) => (
          <Flex key={`axis-row-group-${index}`} direction="row" gap="md" align="stretch" className="w-full">
            {group.rail && <FrameCell className="shrink-0" style={{ width: '4.5rem', height: '8.5rem' }} />}
            {group.canvas && <FrameCell className="min-w-[11rem] flex-1" style={{ width: 'auto', minWidth: '11rem', flex: '1.4 1 12rem', height: '8.5rem' }} />}
            {(group.actionTop || group.actionBottom) && (
              <Flex direction="column" gap="sm" className="w-[5.5rem] shrink-0">
                {group.actionTop && <FrameCell className="shrink-0" style={{ width: '5.5rem', height: '4.5rem' }} />}
                {group.actionBottom && <FrameCell className="shrink-0" style={{ width: '5.5rem', height: '3.25rem' }} />}
              </Flex>
            )}
          </Flex>
        ))}
      </Flex>
    );
  }
 
  const actions = getAxisColumnActionSpecs(frameCount);
  return (
    <Flex direction="column" justify={justify} align={align} gap={gap} wrap={wrap} className="w-full">
      <FrameCell className="w-full" style={{ width: '100%', height: '2.75rem' }} />
      <FrameCell className="w-full" style={{ width: '100%', height: '8rem' }} />
      <Flex direction="row" wrap="wrap" gap="sm" className="w-full">
        {actions.map((action, index) => (
          <FrameCell key={`column-action-${index}`} className={action.className} style={action.style as React.CSSProperties} />
        ))}
      </Flex>
    </Flex>
  );
}
 
export default function Example() {
  return renderPreview({ direction: 'row', justify: 'start', align: 'stretch', gap: 'md', wrap: 'nowrap', frameCount: 4 });
}

"use client";
 
import React from 'react'
import { Flex, Frame } from 'ui-lab-components'
import type { FlexProps } from 'ui-lab-components'
import type { ControlDef } from '@/types'
 
type FlexDirection = NonNullable<FlexProps['direction']>;
type FlexJustify = NonNullable<FlexProps['justify']>;
type FlexAlign = NonNullable<FlexProps['align']>;
type FlexGap = NonNullable<FlexProps['gap']>;
type FlexWrap = NonNullable<FlexProps['wrap']>;
 
const BASE_CELL_STYLE = {
  '--frame-fill': 'var(--background-900)',
  '--frame-stroke-color': 'var(--background-600)',
} as React.CSSProperties;
 
export const controls: ControlDef[] = [
  {
    name: 'direction',
    label: 'Main Axis',
    type: 'select',
    options: [
      { label: 'Row', value: 'row' },
      { label: 'Column', value: 'column' },
    ],
    defaultValue: 'row',
  },
  {
    name: 'justify',
    label: 'Main-Axis Distribution',
    type: 'select',
    options: [
      { label: 'Start', value: 'start' },
      { label: 'Center', value: 'center' },
      { label: 'End', value: 'end' },
      { label: 'Space Between', value: 'between' },
      { label: 'Space Around', value: 'around' },
      { label: 'Space Evenly', value: 'evenly' },
    ],
    defaultValue: 'start',
  },
  {
    name: 'align',
    label: 'Cross-Axis Alignment',
    type: 'select',
    options: [
      { label: 'Stretch', value: 'stretch' },
      { label: 'Start', value: 'start' },
      { label: 'Center', value: 'center' },
      { label: 'End', value: 'end' },
      { label: 'Baseline', value: 'baseline' },
    ],
    defaultValue: 'stretch',
  },
  {
    name: 'gap',
    label: 'Gap Token',
    type: 'select',
    options: [
      { label: 'Extra Small', value: 'xs' },
      { label: 'Small', value: 'sm' },
      { label: 'Medium', value: 'md' },
      { label: 'Large', value: 'lg' },
      { label: 'Extra Large', value: 'xl' },
    ],
    defaultValue: 'md',
  },
  {
    name: 'frameCount',
    label: 'Frames',
    type: 'stepper',
    defaultValue: 7,
    min: 4,
    max: 12,
    step: 1,
  },
  {
    name: 'wrap',
    label: 'Overflow Strategy',
    type: 'select',
    options: [
      { label: 'No Wrap', value: 'nowrap' },
      { label: 'Wrap', value: 'wrap' },
    ],
    defaultValue: 'wrap',
  },
];
 
export const previewLayout = 'start' as const;
export const resizable = true;
 
function getDirection(value: unknown): FlexDirection {
  return value === 'column' ? 'column' : 'row';
}
 
function getJustify(value: unknown): FlexJustify {
  if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly') return value;
  return 'start';
}
 
function getAlign(value: unknown): FlexAlign {
  if (value === 'start' || value === 'center' || value === 'end' || value === 'baseline') return value;
  return 'stretch';
}
 
function getGap(value: unknown): FlexGap {
  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;
  return 'md';
}
 
function getWrap(value: unknown): FlexWrap {
  return value === 'wrap' ? 'wrap' : 'nowrap';
}
 
function getFrameCount(value: unknown, min: number, max: number, fallback: number) {
  const n = typeof value === 'number' ? value : Number(value);
  if (Number.isNaN(n)) return fallback;
  return Math.min(max, Math.max(min, Math.round(n)));
}
 
function FrameCell({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <Frame pathStroke="dashed" className={className} style={{ ...BASE_CELL_STYLE, ...style }}>
      <div className="size-full" />
    </Frame>
  );
}
 
function getToolbarFlowSpecs(direction: FlexDirection, frameCount: number) {
  if (direction === 'column') {
    const pattern = [
      { style: { width: '100%', height: '3.25rem' } },
      { style: { width: '100%', height: '3rem' } },
      { style: { width: '100%', height: '3.25rem' } },
      { style: { width: '100%', height: '2.75rem' } },
    ];
    return Array.from({ length: frameCount }, (_, i) => ({ className: 'w-full', ...pattern[i % pattern.length] }));
  }
  const repeatPattern = [
    { className: 'shrink-0', style: { width: '6rem', height: '3.25rem' } },
    { className: 'shrink-0', style: { width: '6.75rem', height: '3.25rem' } },
    { className: 'shrink-0', style: { width: '5.5rem', height: '3.25rem' } },
    { className: 'shrink-0', style: { width: '6.5rem', height: '3.25rem' } },
    { className: 'shrink-0', style: { width: '4.5rem', height: '3.25rem' } },
    { className: 'shrink-0', style: { width: '5.5rem', height: '3.25rem' } },
  ];
  return [
    { className: 'min-w-[12rem]', style: { width: 'auto', minWidth: '12rem', flex: '1.6 1 14rem', height: '3.25rem' } },
    ...Array.from({ length: Math.max(frameCount - 1, 0) }, (_, i) => repeatPattern[i % repeatPattern.length]),
  ];
}
 
export function renderPreview(props: Record<string, unknown>) {
  const direction = getDirection(props.direction);
  const frameCount = getFrameCount(props.frameCount, 4, 12, 7);
  const specs = getToolbarFlowSpecs(direction, frameCount);
 
  return (
    <Flex
      direction={direction}
      justify={getJustify(props.justify)}
      align={getAlign(props.align)}
      gap={getGap(props.gap)}
      wrap={getWrap(props.wrap)}
      className="w-full"
    >
      {specs.map((spec, index) => (
        <FrameCell key={`${direction}-toolbar-${index}`} className={spec.className} style={spec.style as React.CSSProperties} />
      ))}
    </Flex>
  );
}
 
export default function Example() {
  return renderPreview({ direction: 'row', justify: 'start', align: 'center', gap: 'md', wrap: 'wrap', frameCount: 7 });
}

"use client";
 
import React from 'react'
import { Flex, Frame } from 'ui-lab-components'
import type { FlexProps } from 'ui-lab-components'
import type { ControlDef } from '@/types'
 
type FlexJustify = NonNullable<FlexProps['justify']>;
type FlexGap = NonNullable<FlexProps['gap']>;
type FlexWrap = NonNullable<FlexProps['wrap']>;
 
const BASE_CELL_STYLE = {
  '--frame-fill': 'var(--background-900)',
  '--frame-stroke-color': 'var(--background-600)',
} as React.CSSProperties;
 
const CONTAINER_FLOW_STYLES = `
  .flex-container-flow-avatar {
    width: 5rem;
    min-width: 5rem;
    flex-grow: 0.65;
    flex-shrink: 1;
  }
 
  .flex-container-flow-main {
    width: 15rem;
    min-width: 14rem;
    flex-grow: 2;
    flex-shrink: 1;
  }
 
  .flex-container-flow-sidebar {
    width: 10rem;
    min-width: 10rem;
    flex-grow: 1;
    flex-shrink: 1;
  }
 
  @container flex-parent (width < 400px) {
    .flex-container-flow-avatar,
    .flex-container-flow-main,
    .flex-container-flow-sidebar {
      width: 100%;
      min-width: 0;
    }
  }
`;
 
export const controls: ControlDef[] = [
  {
    name: 'gap',
    label: 'Base Gap Token',
    type: 'select',
    options: [
      { label: 'Extra Small', value: 'xs' },
      { label: 'Small', value: 'sm' },
      { label: 'Medium', value: 'md' },
      { label: 'Large', value: 'lg' },
      { label: 'Extra Large', value: 'xl' },
    ],
    defaultValue: 'md',
  },
  {
    name: 'frameCount',
    label: 'Frames',
    type: 'stepper',
    defaultValue: 5,
    min: 5,
    max: 10,
    step: 1,
  },
  {
    name: 'justify',
    label: 'Main-Axis Distribution',
    type: 'select',
    options: [
      { label: 'Start', value: 'start' },
      { label: 'Center', value: 'center' },
      { label: 'Space Between', value: 'between' },
      { label: 'Space Around', value: 'around' },
    ],
    defaultValue: 'start',
  },
  {
    name: 'wrap',
    label: 'Overflow Strategy',
    type: 'select',
    options: [
      { label: 'No Wrap', value: 'nowrap' },
      { label: 'Wrap', value: 'wrap' },
    ],
    defaultValue: 'nowrap',
  },
  {
    name: 'containerQueryResponsive',
    label: 'Enable Container Queries',
    type: 'toggle',
    defaultValue: true,
  },
];
 
export const previewLayout = 'start' as const;
export const resizable = true;
 
function getJustify(value: unknown): FlexJustify {
  if (value === 'center' || value === 'end' || value === 'between' || value === 'around' || value === 'evenly') return value;
  return 'start';
}
 
function getGap(value: unknown): FlexGap {
  if (value === 'xs' || value === 'sm' || value === 'lg' || value === 'xl') return value;
  return 'md';
}
 
function getWrap(value: unknown): FlexWrap {
  return value === 'wrap' ? 'wrap' : 'nowrap';
}
 
function getFrameCount(value: unknown, min: number, max: number, fallback: number) {
  const n = typeof value === 'number' ? value : Number(value);
  if (Number.isNaN(n)) return fallback;
  return Math.min(max, Math.max(min, Math.round(n)));
}
 
function FrameCell({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <Frame pathStroke="dashed" className={className} style={{ ...BASE_CELL_STYLE, ...style }}>
      <div className="size-full" />
    </Frame>
  );
}
 
function getDistribution(frameCount: number) {
  let metadataCount = 2;
  let sidebarCount = 1;
  let remaining = Math.max(frameCount - 5, 0);
  while (remaining > 0) {
    metadataCount += 1;
    remaining -= 1;
    if (remaining > 0) { sidebarCount += 1; remaining -= 1; }
  }
  return { metadataCount, sidebarCount };
}
 
const META_PATTERN = [
  { className: 'min-w-[4.75rem] flex-1', style: { width: 'auto', minWidth: '4.75rem', height: '2.25rem' } },
  { className: 'min-w-[4rem] flex-1', style: { width: 'auto', minWidth: '4rem', height: '2.25rem' } },
  { className: 'min-w-[5.25rem] flex-1', style: { width: 'auto', minWidth: '5.25rem', height: '2.25rem' } },
];
 
const SIDEBAR_PATTERN = [
  { style: { width: '100%', height: '7rem' } },
  { style: { width: '100%', height: '3rem' } },
  { style: { width: '100%', height: '2.5rem' } },
];
 
export function renderPreview(props: Record<string, unknown>) {
  const frameCount = getFrameCount(props.frameCount, 5, 10, 5);
  const { metadataCount, sidebarCount } = getDistribution(frameCount);
 
  return (
    <>
      <style>{CONTAINER_FLOW_STYLES}</style>
      <Flex
        justify={getJustify(props.justify)}
        align="stretch"
        gap={getGap(props.gap)}
        wrap={getWrap(props.wrap)}
        containerQueryResponsive={Boolean(props.containerQueryResponsive)}
        className="w-full"
      >
        <FrameCell className="flex-container-flow-avatar" style={{ height: '7rem' }} />
        <Flex direction="column" gap="sm" className="flex-container-flow-main">
          <FrameCell style={{ width: '100%', height: '4.5rem' }} />
          <Flex gap="sm" wrap="wrap" className="w-full">
            {Array.from({ length: metadataCount }, (_, i) => META_PATTERN[i % META_PATTERN.length]).map((spec, i) => (
              <FrameCell key={`meta-${i}`} className={spec.className} style={spec.style as React.CSSProperties} />
            ))}
          </Flex>
        </Flex>
        <Flex direction="column" gap="sm" className="flex-container-flow-sidebar">
          {Array.from({ length: sidebarCount }, (_, i) => SIDEBAR_PATTERN[i % SIDEBAR_PATTERN.length]).map((spec, i) => (
            <FrameCell key={`sidebar-${i}`} className="w-full" style={spec.style as React.CSSProperties} />
          ))}
        </Flex>
      </Flex>
    </>
  );
}
 
export default function Example() {
  return renderPreview({ gap: 'md', frameCount: 5, justify: 'start', wrap: 'nowrap', containerQueryResponsive: true });
}