refactor(client): rewrite UI primitives batch 1 for relicensing

Behavioral contract preserved exactly: PromptInput form-scoped status,
slot sections, ghost icon button with portal tooltip, and
status-derived submit; Dialog controlled/uncontrolled open state,
trigger focus restoration, portal content, Escape/overlay dismissal,
scroll lock, focus trap, and hidden title; Reasoning controllable
disclosure with stream timing and auto open/close; Tooltip delayed
hover/long-press with portal positioning; Confirmation approval-state
children and shared action button. Props, exports, DOM nesting, class
strings, data-slot attributes, i18n keys, portals, and keyboard/focus
flows unchanged.

Replacement design: private slot-section renderer, context provider
with forwarded-ref helper and registered panel callback, private
disclosure/duration hooks, placement map with style builder, and a
single conditional state component replacing the derived
implementations. Part of the relicensing program in
docs/RELICENSING.md.

Author: devswha

src/shared/view/ui/Confirmation.tsx

@@ -5,56 +5,34 @@ import { cn } from '../../../utils/cn';
 import { Alert } from './Alert';
 import { Button } from './Button';
 
-/* ─── Context ────────────────────────────────────────────────────── */
-
 type ApprovalState = 'pending' | 'approved' | 'rejected' | undefined;
+type ConfirmationContextValue = { approval: ApprovalState };
 
-interface ConfirmationContextValue {
-  approval: ApprovalState;
-}
-
-const ConfirmationContext = React.createContext<ConfirmationContextValue | null>(null);
+const confirmationContext = React.createContext<ConfirmationContextValue | null>(null);
 
 const useConfirmation = () => {
-  const context = React.useContext(ConfirmationContext);
-  if (!context) {
+  const confirmation = React.useContext(confirmationContext);
+  if (confirmation === null) {
     throw new Error('Confirmation components must be used within Confirmation');
   }
-  return context;
+  return confirmation;
 };
 
-/* ─── Confirmation (root) ────────────────────────────────────────── */
-
-export interface ConfirmationProps extends React.HTMLAttributes<HTMLDivElement> {
-  approval?: ApprovalState;
-}
-
-export const Confirmation: React.FC<ConfirmationProps> = ({
-  className,
-  approval = 'pending',
-  children,
-  ...props
-}) => {
-  const contextValue = React.useMemo(() => ({ approval }), [approval]);
+export interface ConfirmationProps extends React.HTMLAttributes<HTMLDivElement> { approval?: ApprovalState; }
 
+export const Confirmation: React.FC<ConfirmationProps> = ({ className, approval = 'pending', children, ...props }) => {
+  const state = React.useMemo(() => ({ approval }), [approval]);
   return (
-    <ConfirmationContext.Provider value={contextValue}>
-      <Alert className={cn('flex flex-col gap-2', className)} {...props}>
-        {children}
-      </Alert>
-    </ConfirmationContext.Provider>
+    <confirmationContext.Provider value={state}>
+      <Alert className={cn('flex flex-col gap-2', className)} {...props}>{children}</Alert>
+    </confirmationContext.Provider>
   );
 };
 Confirmation.displayName = 'Confirmation';
 
-/* ─── ConfirmationTitle ──────────────────────────────────────────── */
-
 export type ConfirmationTitleProps = React.HTMLAttributes<HTMLDivElement>;
 
-export const ConfirmationTitle: React.FC<ConfirmationTitleProps> = ({
-  className,
-  ...props
-}) => (
+export const ConfirmationTitle: React.FC<ConfirmationTitleProps> = ({ className, ...props }) => (
   <div
     data-slot="confirmation-title"
     className={cn('inline text-sm text-muted-foreground', className)}
@@ -63,56 +41,35 @@ export const ConfirmationTitle: React.FC<ConfirmationTitleProps> = ({
 );
 ConfirmationTitle.displayName = 'ConfirmationTitle';
 
-/* ─── ConfirmationRequest — visible only when pending ────────────── */
+type ConfirmationStateChildren = { children?: React.ReactNode };
 
-export interface ConfirmationRequestProps {
-  children?: React.ReactNode;
+function ConfirmationState({ approval, children }: ConfirmationStateChildren & { approval: Exclude<ApprovalState, undefined> }) {
+  return useConfirmation().approval === approval ? <>{children}</> : null;
 }
 
-export const ConfirmationRequest: React.FC<ConfirmationRequestProps> = ({ children }) => {
-  const { approval } = useConfirmation();
-  if (approval !== 'pending') return null;
-  return <>{children}</>;
-};
+export interface ConfirmationRequestProps { children?: React.ReactNode; }
+export const ConfirmationRequest: React.FC<ConfirmationRequestProps> = ({ children }) => (
+  <ConfirmationState approval="pending">{children}</ConfirmationState>
+);
 ConfirmationRequest.displayName = 'ConfirmationRequest';
 
-/* ─── ConfirmationAccepted — visible only when approved ──────────── */
-
-export interface ConfirmationAcceptedProps {
-  children?: React.ReactNode;
-}
-
-export const ConfirmationAccepted: React.FC<ConfirmationAcceptedProps> = ({ children }) => {
-  const { approval } = useConfirmation();
-  if (approval !== 'approved') return null;
-  return <>{children}</>;
-};
+export interface ConfirmationAcceptedProps { children?: React.ReactNode; }
+export const ConfirmationAccepted: React.FC<ConfirmationAcceptedProps> = ({ children }) => (
+  <ConfirmationState approval="approved">{children}</ConfirmationState>
+);
 ConfirmationAccepted.displayName = 'ConfirmationAccepted';
 
-/* ─── ConfirmationRejected — visible only when rejected ──────────── */
-
-export interface ConfirmationRejectedProps {
-  children?: React.ReactNode;
-}
-
-export const ConfirmationRejected: React.FC<ConfirmationRejectedProps> = ({ children }) => {
-  const { approval } = useConfirmation();
-  if (approval !== 'rejected') return null;
-  return <>{children}</>;
-};
+export interface ConfirmationRejectedProps { children?: React.ReactNode; }
+export const ConfirmationRejected: React.FC<ConfirmationRejectedProps> = ({ children }) => (
+  <ConfirmationState approval="rejected">{children}</ConfirmationState>
+);
 ConfirmationRejected.displayName = 'ConfirmationRejected';
 
-/* ─── ConfirmationActions — visible only when pending ────────────── */
-
 export type ConfirmationActionsProps = React.HTMLAttributes<HTMLDivElement>;
 
-export const ConfirmationActions: React.FC<ConfirmationActionsProps> = ({
-  className,
-  ...props
-}) => {
+export const ConfirmationActions: React.FC<ConfirmationActionsProps> = ({ className, ...props }) => {
   const { approval } = useConfirmation();
   if (approval !== 'pending') return null;
-
   return (
     <div
       data-slot="confirmation-actions"
@@ -123,16 +80,9 @@ export const ConfirmationActions: React.FC<ConfirmationActionsProps> = ({
 };
 ConfirmationActions.displayName = 'ConfirmationActions';
 
-/* ─── ConfirmationAction — styled button ─────────────────────────── */
-
-export type ConfirmationActionProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: 'default' | 'outline' | 'ghost' | 'destructive';
-};
+export type ConfirmationActionProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: 'default' | 'outline' | 'ghost' | 'destructive'; };
 
-export const ConfirmationAction: React.FC<ConfirmationActionProps> = ({
-  variant = 'default',
-  ...props
-}) => (
+export const ConfirmationAction: React.FC<ConfirmationActionProps> = ({ variant = 'default', ...props }) => (
   <Button className="h-8 px-3 text-sm" variant={variant} type="button" {...props} />
 );
 ConfirmationAction.displayName = 'ConfirmationAction';